<template>
  <section class="course-section">
    <header class="course-section__header">
      <h2>{{ title }}</h2>
      <p>{{ subtitle }}</p>
    </header>
    <div class="course-section__grid course-section__grid--live">
      <article
        class="live-card"
        v-for="event in events"
        :key="event.id"
        role="button"
        tabindex="0"
        @click="emit('event-select', event.id)"
        @keyup.enter="emit('event-select', event.id)"
        @keyup.space.prevent="emit('event-select', event.id)"
      >
        <img class="live-card__cover" :src="event.coverImage" :alt="event.title" loading="lazy" />
        <div class="live-card__body">
          <h3>{{ event.title }}</h3>
          <p>{{ event.startTimeLabel }}</p>
          <div class="live-card__footer">
            <span class="live-card__price" v-if="event.priceLabel">{{ event.priceLabel }}</span>
            <button
              class="live-card__action"
              type="button"
              @click.stop="emit('event-select', event.id)"
            >
              {{ event.actionLabel }}
            </button>
          </div>
        </div>
      </article>
    </div>
  </section>
</template>

<script setup lang="ts">
import { toRefs } from 'vue'
import type { CourseLiveEvent } from '../../types/course/Course.ts'

defineOptions({
  name: 'CourseLiveSection',
})

const emit = defineEmits<{
  (e: 'event-select', eventId: string): void
}>()

const props = defineProps<{
  title: string
  subtitle: string
  events: CourseLiveEvent[]
}>()

const { title, subtitle, events } = toRefs(props)
</script>

<style scoped>
.course-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.course-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-section__header h2 {
  font-size: 28px;
  font-weight: 700;
}

.course-section__header p {
  font-size: 16px;
  color: #6b7280;
}

.course-section__grid {
  display: grid;
  gap: 24px;
}

.course-section__grid--live {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.live-card {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 36px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  outline: none;
}

.live-card__cover {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.live-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.live-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.live-card__price {
  font-weight: 600;
  color: #10b981;
}

.live-card__action {
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  background: #3c65f5;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.live-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(60, 101, 245, 0.3);
}
</style>
